<template>
  <div class="home">
      <el-container>
        <!-- 头部 -->
            <el-header>
                <div class="header-left">公司logo</div>
                 <div class="header-right">
                    <p>后台管理系统</p>
                    <button type="primary" size="mini">退出登录</button>
                 </div>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                      <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        router
                        background-color="#333"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    
                    <el-submenu index="/user">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="/user/userList">用户列表</el-menu-item>
                    </el-submenu>
                    <el-submenu index="/rights">
                        <template slot="title">
                            <i class="el-icon-s-goods"></i>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="/rights/rightsList">权限列表</el-menu-item>
                        <el-menu-item index="/rights/rolesList">权限列表</el-menu-item>
                    </el-submenu>
                   </el-menu>
                </el-aside>
                <!-- 右边内容 -->
                <el-main>
                    <!-- 面包屑 -->
                    <bread :list="list"></bread>
                    <!-- 坑 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import bread from '@/components/breadcrumb.vue'
export default {
  name: 'HomeView',
  components: {
    bread
  },
  data() {
    return {
        list:[],//存放路由信息
    }
  },
  watch:{
    // 监听路由的变化   this.$route   路由信息
    $route:{ 
       handler(newVal){
           console.log(newVal.matched);
        //    matched  是匹配的意思  匹配路由  假如我们访问的是/user/userList 那么this.$route.matched匹配到一个数组，
        // 这个数组里面包含  '/'  '/user' '/user/userList'
        // 声明一个空的数组 存放组装后的路由信息
        let list = []
        newVal.matched.forEach(item=>{
            list.push({
                path:item.path || '/',
                title:item.meta.title
            })
        })
        this.list = list

        console.log(this.list);

       },
       
    }
  }
}
</script>
<style lang="scss" scoped>
.el-header {
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 60px;
    display: flex;
    .header-left{
        width:200px;
    }
    .header-right{
        flex:1;
         display: flex;
         align-items: center;
         justify-content: space-between;
    }
  }
  
  .el-aside {
    // background-color: #333;
    
    text-align: center;
    color: #fff;
   
  }
  
  .el-main {
    
  }
  
</style>

